<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Demo</title>
<link rel="stylesheet" type="text/css" href="../../js/jquery-easyui-1.3.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../js/jquery-easyui-1.3.5/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../themes/css/tsm-icon.css">
<script type="text/javascript" src="../../js/jquery.js"></script>

<script src="../../js/scripts/boot.js" type="text/javascript"></script>
<link href="../../js/scripts/miniui/themes/blue/skin.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../../js/jquery-easyui-1.3.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../js/jquery-easyui-1.3.5/locale/easyui-lang-zh_CN.js" ></script>



		<style type="text/css">
			body {
				margin-left: 0px;
				margin-top: 0px;
				margin-right: 0px;
				margin-bottom: 0px;
			}
		</style>

		<script>
        	function onDrawNode(e) {
                var tree = e.sender;
                var node = e.node;
                //所有子节点加上超链接
                if (node.url!='') {
                     e.nodeHtml = "<a style='text-decoration: none' href='javascript:OpenPage(\""+node.text+"\",\""+node.url+"\");' >" + node.text + "</a>";
                }
            }
			
			function OpenPage(title,url){
				addTab(title,url);
			}
			
			$(document).ready(function(){
				var tree1 = mini.get("tree1");
	   			tree1.loadData(dataTree);
				tree1.expandAll();
			});
			
			//数据源
			var dataTree =[
				{url: "", text: "员工关系管理",
					children: [
								{url: "", text: "组织结构管理",children: [
								{url: "jczx/list.html", text: "重点单位"},
								{url: "index-demo1.html", text: "岗位分类"},
								{url: "demo.html", text: "人员分类"},
								{url: "demo.html", text: "人员分类"},
								{url: "demo.html", text: "组别分类"}
							]
							},
						{url: "", text: "员工履历管理",children: [
								{url: "demo.html", text: "员工履历管理"},
								{url: "demo.html", text: "添加员工履历"}
							]
						},
						{url: "", text: "人员名册管理",children: [
								{url: "demo.html", text: "人员名册管理"},
								{url: "demo.html", text: "添加员工信息"}
							]
						},
						{url: "", text: "人员变动历史管理",children: [
								{url: "demo.html", text: "人员变动历史"}
							]},
						{url: "", text: "人员统计管理",children: [
								{url: "demo.html", text: "树修改测试"},
								{url: "datagrid.html", text: "列表测试"}
							]}
					]
				}
			];
			
			//添加节点
			function onAddNode(e,_Url,_Text) {
	            var tree = mini.get("tree1");
	            var node = tree.getSelectedNode();
	            var newNode = {url:_Url,text:_Text,id:_Text};
	            tree.addNode(newNode, "add", node);
	            tree.expandNode(node);//展开节点
	        }
	        //删除节点
			function onRemoveNode(e,id) {
	            var tree = mini.get("tree1");
	            var node = tree.getNode(id);
	            if (node){
	                 tree.removeNode(node);
	            }
	        }
	        //编辑
			function onEditNode(e,id,text) {
				var tree = mini.get("tree1");
	            var node = tree.getNode(id);
	            tree.updateNode(node, {text: text});
	        }

        </script>
</head>
<body class="easyui-layout">
	<div region="west" border="true" split="true" title="监测中心" class="cs-west"  data-options="iconCls:'icon-ok'">
		<div class="easyui-accordion" fit="true" border="false">
				<div title="重点事件" data-options="iconCls:'icon-menu1'" >
                	 <div id="tree1" class="mini-tree" style="padding:0px;height:99%;width:100%;" 
                        ondrawnode="onDrawNode" showTreeIcon="true" textField="text" idField="id" value="base" expandOnNodeClick="true">        
                    </div>
				</div>
				<div title="关联事件"  data-options="iconCls:'icon-menu1'">
					 <ul>
                        <li>
                            <div class="selected"><a href="javascript:OpenPage('菜单管理','jczx/list.html');" ><span class="icon-nav"></span>菜单管理</a></div>
                        </li>
                        <li>
                            <div class=""><a href="demo.html" target="mainFrame"><span class="icon-add"></span>添加用户</a></div>
                        </li>
                        <li>
                            <div class=""><a href="demo2.html" target="mainFrame"><span class="icon-users"></span>用户管理</a></div>
                        </li>
                        <li>
                            <div class=""><a href="demo2.html" target="mainFrame"><span class="icon-role"></span>角色管理</a></div>
                        </li>
                        <li>
                            <div class=""><a href="demo.html" target="mainFrame"><span class="icon-set"></span>权限设置</a></div>
                        </li>
                        <li>
                            <div class=""> <a href="demo.html" target="mainFrame"><span class="icon-log"></span>系统日志</a></div>
                        </li>
                    </ul>
				</div>
		</div>
	</div>
	<div id="mainPanle" region="center" border="true" border="false">
		 <div id="tabs" class="easyui-tabs"  fit="true" border="false" >
                <div title="Home">
				<div class="cs-home-remark">
					<h1>统管局协作系统 Demo</h1> <br>
					制作：ypf <br>
					说明：基于jQuery EasyUI 1.3.5 Demo
				</div>
				</div>
        </div>
	</div>
	<div id="mm" class="easyui-menu cs-tab-menu">
		<div id="mm-tabupdate">刷新</div>
		<div class="menu-sep"></div>
		<div id="mm-tabclose">关闭</div>
		<div id="mm-tabcloseother">关闭其他</div>
		<div id="mm-tabcloseall">关闭全部</div>
	</div>
</body>
</html>


<style type="text/css">
body {
	font: 12px/20px "微软雅黑", "宋体", Arial, sans-serif, Verdana, Tahoma;
	padding: 0;
	margin: 0;
}
a:link {
 text-decoration: none;
}
a:visited {
 text-decoration: none;
}
a:hover {
 text-decoration: underline;
}
a:active {
 text-decoration: none;
}
.cs-north {
	height:60px;
}
.cs-north-bg {
	width: 100%;
	height: 100%;
	background: url(../../js/jquery-easyui-1.3.5/themes/gray/images/header_bg.png) repeat-x;
}
.cs-north-logo {
	height: 40px;
	margin: 15px 0px 0px 5px;
	display: inline-block;
	color:#000000;font-size:22px;font-weight:bold;text-decoration:none
}
.cs-west {
	width:200px;padding:0px;
}
.cs-south {
	height:25px;background:#F7FEEF repeat-x;padding:0px;text-align:center;
}
.cs-navi-tab {
	padding: 5px;
}
.cs-tab-menu {
	width:220px;
}
.cs-home-remark {
	padding: 10px;
}
.wrapper {
    float: right;
    height: 30px;
    margin-left: 10px;
}
.ui-skin-nav {
    float: right;
	padding: 0;
	margin-right: 10px;
	list-style: none outside none;
	height: 30px;
}

.ui-skin-nav .li-skinitem {
    float: left;
    font-size: 12px;
    line-height: 30px;
	margin-left: 10px;
    text-align: center;
}
.ui-skin-nav .li-skinitem span {
	cursor: pointer;
	width:10px;
	height:10px;
	display:inline-block;
}
.ui-skin-nav .li-skinitem span.cs-skin-on{
	border: 1px solid #FFFFFF;
}

.ui-skin-nav .li-skinitem span.gray{background-color:gray;}
.ui-skin-nav .li-skinitem span.pepper-grinder{background-color:#BC3604;}
.ui-skin-nav .li-skinitem span.blue{background-color:blue;}
.ui-skin-nav .li-skinitem span.cupertino{background-color:#D7EBF9;}
.ui-skin-nav .li-skinitem span.dark-hive{background-color:black;}
.ui-skin-nav .li-skinitem span.sunny{background-color:#FFE57E;}

.ui-skin-nav .li-skinitem span.black{background-color:#FD107E;}
.ui-skin-nav .li-skinitem span.bootstrap{background-color:#01A57E;}
.ui-skin-nav .li-skinitem span.metro{background-color:#FFEAAA;}
</style>
<script type="text/javascript">
function addTab(title, url){
	if ($('#tabs').tabs('exists', title)){
		$('#tabs').tabs('select', title);//选中并刷新
		var currTab = $('#tabs').tabs('getSelected');
		var url = $(currTab.panel('options').content).attr('src');
		if(url != undefined && currTab.panel('options').title != 'Home') {
			$('#tabs').tabs('update',{
				tab:currTab,
				options:{
					content:createFrame(url)
				}
			})
		}
	} else {
		var content = createFrame(url);
		$('#tabs').tabs('add',{
			title:title,
			content:content,
			closable:true
		});
	}
	tabClose();
}
function createFrame(url) {
	var s = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
	return s;
}
		
function tabClose() {
	/*双击关闭TAB选项卡*/
	$(".tabs-inner").dblclick(function(){
		var subtitle = $(this).children(".tabs-closable").text();
		$('#tabs').tabs('close',subtitle);
	})
	/*为选项卡绑定右键*/
	$(".tabs-inner").bind('contextmenu',function(e){
		$('#mm').menu('show', {
			left: e.pageX,
			top: e.pageY
		});

		var subtitle =$(this).children(".tabs-closable").text();

		$('#mm').data("currtab",subtitle);
		$('#tabs').tabs('select',subtitle);
		return false;
	});
}		
//绑定右键菜单事件
function tabCloseEven() {
	//刷新
	$('#mm-tabupdate').click(function(){
		var currTab = $('#tabs').tabs('getSelected');
		var url = $(currTab.panel('options').content).attr('src');
		if(url != undefined && currTab.panel('options').title != 'Home') {
			$('#tabs').tabs('update',{
				tab:currTab,
				options:{
					content:createFrame(url)
				}
			})
		}
	})
	//关闭当前
	$('#mm-tabclose').click(function(){
		var currtab_title = $('#mm').data("currtab");
		$('#tabs').tabs('close',currtab_title);
	})
	//全部关闭
	$('#mm-tabcloseall').click(function(){
		$('.tabs-inner span').each(function(i,n){
			var t = $(n).text();
			if(t != 'Home') {
				$('#tabs').tabs('close',t);
			}
		});
	});
	//关闭除当前之外的TAB
	$('#mm-tabcloseother').click(function(){
		var prevall = $('.tabs-selected').prevAll();
		var nextall = $('.tabs-selected').nextAll();		
		if(prevall.length>0){
			prevall.each(function(i,n){
				var t=$('a:eq(0) span',$(n)).text();
				if(t != 'Home') {
					$('#tabs').tabs('close',t);
				}
			});
		}
		if(nextall.length>0) {
			nextall.each(function(i,n){
				var t=$('a:eq(0) span',$(n)).text();
				if(t != 'Home') {
					$('#tabs').tabs('close',t);
				}
			});
		}
		return false;
	});
	//关闭当前右侧的TAB
	$('#mm-tabcloseright').click(function(){
		var nextall = $('.tabs-selected').nextAll();
		if(nextall.length==0){
			//msgShow('系统提示','后边没有啦~~','error');
			alert('后边没有啦~~');
			return false;
		}
		nextall.each(function(i,n){
			var t=$('a:eq(0) span',$(n)).text();
			$('#tabs').tabs('close',t);
		});
		return false;
	});
	//关闭当前左侧的TAB
	$('#mm-tabcloseleft').click(function(){
		var prevall = $('.tabs-selected').prevAll();
		if(prevall.length==0){
			alert('到头了，前边没有啦~~');
			return false;
		}
		prevall.each(function(i,n){
			var t=$('a:eq(0) span',$(n)).text();
			$('#tabs').tabs('close',t);
		});
		return false;
	});

	//退出
	$("#mm-exit").click(function(){
		$('#mm').menu('hide');
	})
}

$(function() {
	tabCloseEven();

	$('.cs-navi-tab').click(function() {
		var $this = $(this);
		var href = $this.attr('src');
		var title = $this.text();
		addTab(title, href);
	});

	
});

</script>
